// 匹配动态变量的  +? 尽可能少匹配
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;

function genProps(attrs) {
  let str = "";
  for (let i = 0; i < attrs.length; i++) {
    let attr = attrs[i];
    if (attr.name == "style") {
      let styleObj = {};
      // attr.split(";")
      attr.value.replace(/([^;:]+):([^;:]+)/g, function () {
        styleObj[arguments[1]] = arguments[2];
      });
      attr.value = styleObj;
    }
    str += `${attr.name}:${JSON.stringify(attr.value)},`;
  }

  //   return `{${str.slice(0, -1)}}`;
  //   return str; // 没有形成对象
  //   return `{${str}}`;  // 最后多了一个单引号
  return `{${str.slice(0, -1)}}`;
}

function gen(el) {
  if (el.type == 1) {
    return generate(el);
  } else {
    let text = el.text;
    // return `_v('${text}')`; // 这种方式只能将数据显示， 但不能处理 插值表达式
    // 处理 插值表达式  {{}}
    if (!defaultTagRE.test(text)) {
      return `_v('${text}')`;
    } else {
      // "hello" + arr + "world";
      let tokens = [];

      let match;
      let lastIndex = (defaultTagRE.lastIndex = 0); // CSS_LOADER 原理是一样的
      while ((match = defaultTagRE.exec(text))) {
        // exec使用时会有问题
        // 看有没有匹配到
        let index = match.index; // 开始索引
        if (index > lastIndex) {
          tokens.push(JSON.stringify(text.slice(lastIndex, index)));
        }
        tokens.push(`_s(${match[1].trim()})`);
        lastIndex = index + match[0].length;
      }
      if (lastIndex < text.length) {
        tokens.push(text.slice(lastIndex));
      }

      return `_v(${tokens.join("+")})`;
    }
  }
}

function genChildren(el) {
  let children = el.children; // 获取儿子
  if (children) {
    return children.map((c) => gen(c)).join(",");
  }
  return false;
}

export function generate(el) {
  // console.log("----------", el);
  // 遍历树   将树拼接成字符串
  let children = genChildren(el);
  //   console.log(children);
  let code = `_c('${el.tag}', ${el.attrs.length ? genProps(el.attrs) : "undefined"
    }${children ? `,${children}` : ""})`;
  return code;
}
